<?php use_javascript('dotimeout.js') ?>
<form id="buscadorForm" action="<?php echo url_for('buscar/resultado') ?>" method="get">
<div id="criterios">
    <div id="criterioKeyWord" style="display: none;">
    </div>
    <div id="criterioCategoria" style="display: none;">
    </div>
    <div id="criterioAutor" style="display: none;"></div>
    <div id="criterioLugar" style="display: none;"></div>
    <div id="criterioAnio" style="display: none;"></div>
</div>
<div id="search">
    <div class="divInputBuscador">
        <input name="txtBuscar" autocomplete="off" autofocus="" type="text" placeholder="Buscar" id="txtBuscar" />
        <a title="Buscar" href="javascript:document.getElementById('buscadorForm').submit();"><?php echo image_tag('lupa.png'); ?></a>
    <div id="autocompletar" style="display: none;text-align: left;" >
    <a href="javascript:cerrar();" style="float: right;">x</a>
     <ul id="zonaKeyWord">
        <li style="color: #575756;font-weight: bold;"> Documentos:&nbsp;(1)
            <ul>
                <li>Documento 1</li>
            </ul>
            
        </li>
    </ul>
    <ul id="zonaCategoria">
        <li style="color: #575756;font-weight: bold;"> Categoria:&nbsp;(1)
            <ul>
                <li>Categoria 1</li>
            </ul>
            
        </li>
    </ul>
    <ul id="zonaAutor">
        <li style="color: #575756;font-weight: bold;"> Autor:&nbsp;(3)
            <ul>
                <li>Autor 1</li>
                <li>Autor 2</li>
                <li>Autor 3</li>
            </ul>
            
        </li>
    </ul>
    <ul id="zonaLugar">
        <li style="color: #575756;font-weight: bold;"> Lugar:&nbsp;(2)
            <ul>
                <li>Lugar 1</li>
                <li>Lugar 2</li>
            </ul>
            
        </li>
    </ul>
    <ul id="zonaAnio">
        <li style="color: #575756;font-weight: bold;"> Año:&nbsp;(2)
            <ul>
                <li>Lugar 1</li>
                <li>Lugar 2</li>
            </ul>
            
        </li>
    </ul>
</div>

    </div>
</div>
</form>    


<script type="text/javascript">

$(document).ready(function(){


$('#txtBuscar').keyup(function(){
  $(this).doTimeout( 'text-type', 400, function(){
   
    if($('#txtBuscar').val()!="")
    {
        buscarCategoria($('#txtBuscar').val());
        buscarAutor($('#txtBuscar').val());
        buscarLugar($('#txtBuscar').val());
        buscarAnio($('#txtBuscar').val());      
        buscarKeyWord($('#txtBuscar').val());
    }
  });

});
});


function buscarAutor(value)
{
       $("#zonaAutor").hide();
       $.ajax({
            url:     '<?php echo url_for('@buscarAutor') ?>',
            data:    { autor : value},
            success: function(data)
            {                
                $("#zonaAutor").html(data);
                var cantidad = parseInt( $("#cantidadAutor").val());
                if(cantidad>0)
                {
                     $("#zonaAutor").show();
                     $("#autocompletar").show();
                }
                
            }
        });  
}

function buscarLugar(value)
{
       $("#zonaLugar").hide();
       $.ajax({
            url:     '<?php echo url_for('@buscarLugar') ?>',
            data:    { lugar : value},
            success: function(data)
            {                
                $("#zonaLugar").html(data);
                var cantidad = parseInt( $("#cantidadLugar").val());
                if(cantidad>0)
                {
                     $("#zonaLugar").show();
                     $("#autocompletar").show();
                }
                
            }
        });  
}
function buscarCategoria(value)
{
       $("#zonaCategoria").hide();
       $.ajax({
            url:     '<?php echo url_for('@buscarCategoria') ?>',
            data:    { categoria : value},
            success: function(data)
            {                
                $("#zonaCategoria").html(data);
                var cantidad = parseInt( $("#cantidadCategoria").val());
                if(cantidad>0)
                {
                     $("#zonaCategoria").show();
                     $("#autocompletar").show();
                }
                
            }
        });  
}

function buscarAnio(value)
{
       $("#zonaAnio").hide();
       $.ajax({
            url:     '<?php echo url_for('@buscarAnio') ?>',
            data:    { anio : value},
            success: function(data)
            {                
                $("#zonaAnio").html(data);
                var cantidad = parseInt( $("#cantidadAnio").val());
                if(cantidad>0)
                {
                     $("#zonaAnio").show();
                     $("#autocompletar").show();
                }                
            }
        });  
}

function buscarKeyWord(value)
{
       $("#zonaKeyWord").hide();
       $.ajax({
            url:     '<?php echo url_for('@buscarKeyWord') ?>',
            data:    { keyWord : value},
            success: function(data)
            {                
                $("#zonaKeyWord").html(data);
                var cantidad = parseInt( $("#cantidadKeyWord").val());
                if(cantidad>0)
                {
                     $("#zonaKeyWord").show();
                     $("#autocompletar").show();
                }                
            }
        });  
}

function cerrar()
{
    $("#autocompletar").toggle('slow');
}

function deleteCriterio(name)
{
    $("#"+name).hide();
    $("#"+name).html('');
    
}


function crearCriterio(div,textoTitulo,textoValue)
{
  
    var html = textoTitulo+ '  : '+textoValue+' <a href="javascript:deleteCriterio('+"'"+div+"'"+');">x</a>'+
        '<input type="hidden" name="hd'+div+'" value="'+textoValue+'">';
   
    $("#"+div).html(html);
    $("#"+div).show();
    
    $("#txtBuscar").val("").focus();
    $("#autocompletar").hide();
    
}

</script>